<template>
  <div class="page-banner-add">
    <el-form label-width="100px" ref="formRef" :model="formData" :rules="formRules">
      <el-form-item label="图片链接" prop="link">
        <el-input v-model="formData.link"/>
      </el-form-item>
      <el-form-item label="图片提示" prop="alt">
        <el-input v-model="formData.alt"/>
      </el-form-item>


      <el-form-item label="选择图片">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="onChange"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>


      <el-form-item label="图片base64" prop="img">
        <!-- 这个输入框的内容不是用户自己填写的，选择完图片后主动设置的 -->
        <el-input v-model="formData.img" disabled/>
      </el-form-item>
      <el-form-item label="图片base64">
        <el-button @click="handlerAdd" :loading="isLoading">添加</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
import { addBannnerList } from "../../api/banner.js";
export default {
  data() {
    return {
      formData: {
        img: "",
        alt: "",
        link: "",
      },
      formRules: {
        img: [{ required: true, message: "请输入", trigger: "blur" }],
        alt: [{ required: true, message: "请输入", trigger: "blur" }],
        link: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      //选择的图片的缩略图地址
      imageUrl:"",
      isLoading:false
    };
  },
  methods: {
    //选择完文件覆盖默认的xhr行为
    onChange(options){
      console.log(options);
      //取出文件信息
      const file=options.file
      //可以做一些校验工作，必须是图片类型，图片大小
      const typeRight=['image/png','image/jpg','image/jpeg'].includes(file.type)
      const sizeRight=file.size/1024/1024<2
      if(!typeRight||!sizeRight){
        alert("校验不通过，请检查文件类型或大小")
        return false
      }

      //this.imageUrl=window.URL.createObjectURL(file)

      //创建一个FileReader的实例
      const fileReader=new FileReader()
        ///异步操作，不能直接返回url
        //使用readAsDataURL方法获取文件的base64
        fileReader.readAsDataURL(file)
        //需要监听onload事件，读取成功后触发
        fileReader.onload=()=>{
            //获取fileReader.result结果
            //console.log(fileReader.result);//base64
            this.imageUrl=fileReader.result
            this.formData.img=fileReader.result
        }
    },
    async handlerAdd() {
      try {
        await this.$refs.formRef.validate();
        this.isLoading=true
        addBannnerList(this.formData)
          .then(() => {
            this.formData={}
            this.imageUrl=""
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(()=>{
            this.isLoading=false
          })
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
